<!--
@Description:新增编辑
@Author:zqy
@Date:2024-10-22 16:15:47
@Last Modified by:zqy
@Last Modified time:2024-10-22 16:15:47
-->
<template>
  <el-dialog
    ref="formDlg"
    :title="`弹窗信息详情`"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="500px"
    @close="closeDialog"
  >
    <div style="padding-right:30px">
      <el-form ref="refForm" :model="detail" size="mini" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="展示平台:" prop="">
              {{ displayClientName }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="弹窗名称:" prop="name">
              {{ detail.name }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图片内容:" prop="pic">
              <el-image
                v-if="detail.pic"
                style="width: 200px; height: 200px"
                :src="formatImageUrl(detail.pic)"
                :preview-src-list="srcList"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文字内容:" prop="content">
              <div style="line-height:1.5; padding:5px 0" v-html="detailContent" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="有效时间:">
              {{ detail.beginTime }} 至 {{ detail.endTime }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关联内容:">
              {{ gotoContent }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'IndexPageTipDetail',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detail: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {

    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    srcList() {
      const { pic } = this.detail
      return pic ? [this.formatImageUrl(pic)] : []
    },
    displayClientName() {
      const { displayTerminal } = this.detail
      const obj = {
        'SAD-APP': '销售宝APP',
        'SAD-PAD': '销售宝PAD',
        'SAD-PC': '销售宝PC'
      }
      return obj[displayTerminal] || ''
    },
    detailContent() {
      const { content } = this.detail
      return content ? content.replace(/\n/g, '<br>') : ''
    },
    gotoContent() {
      const { gotoType, categoryDTOList, filterId, gotoValue, gotoName } = this.detail
      const obj = {
        'HELP_CENTER': '帮助中心',
        'HELP_CENTER_DETAIL': '帮助中心详情',
        'CUSTOM_PAGE': '自定义页面',
        'GOODS_CENTER_DETAIL': '商品详情',
        'ATLAS': '画册',
        'APPLY_PAGE': '应用页面',
        'OUTSIDE_LINK': '外部链接',
        'GOODS_CENTER_CATEGORY': '商品中心类目',
        'GOODS_CATE': '商品分类',
        'CUSTOMIZED_NEW_PRODUCT_SERIES': '定制新品系列',
        'DEFINE_TAB': '自定义导航',
        'SCHEME_CENTER': '方案中心',
        'PRODUCT_COMBINATION': '搭配套餐'
      }
      let result = obj[gotoType] || ''
      if (gotoType === 'OUTSIDE_LINK') {
        result += '：' + gotoValue
      } else {
        if (gotoName) {
          result += '：' + gotoName
        }
      }
      return result
    }
  },
  created() {

  },

  methods: {
    closeDialog() {
      this.dialogShow = false
    }
  }
}
</script>
<style lang='scss' scoped>
  .img-upload-container {
    .icon-msg{
      margin-top: 10px;
      color: #999;
    }
  }
</style>
